<template>
  <view class="search-container">
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="back" size="20" color="#333"></uni-icons>
      </view>
      <view class="search-input-wrapper">
        <input 
          class="search-input" 
          type="text" 
          v-model="searchKeyword" 
          placeholder="病症、药品名称、医生姓名"
          @input="onSearchInput"
          @confirm="performSearch"
          focus
        />
      </view>
      <view class="search-btn" @click="performSearch">
        <text>搜索</text>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="hot-search" v-if="!searchResults.length && !searchKeyword">
      <view class="section-title">热门搜索</view>
      <view class="hot-tags">
        <view 
          class="hot-tag" 
          v-for="tag in hotSearchTags" 
          :key="tag"
          @click="selectHotTag(tag)"
        >
          {{ tag }}
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-results" v-if="searchResults.length">
      <view class="result-item" v-for="item in searchResults" :key="item.id" @click="selectResult(item)">
        <view class="result-icon">
          <uni-icons :type="item.type === 'symptom' ? 'medical' : item.type === 'drug' ? 'gift' : 'person'" size="20" color="#007AFF"></uni-icons>
        </view>
        <view class="result-content">
          <text class="result-title">{{ item.title }}</text>
          <text class="result-desc">{{ item.description }}</text>
        </view>
        <view class="result-arrow">
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 无搜索结果 -->
    <view class="no-results" v-if="searchKeyword && !searchResults.length && !isSearching">
      <view class="no-results-icon">
        <uni-icons type="search" size="60" color="#ccc"></uni-icons>
      </view>
      <text class="no-results-text">未找到相关结果</text>
      <text class="no-results-tip">试试其他关键词</text>
    </view>

    <!-- 搜索中状态 -->
    <view class="searching" v-if="isSearching">
      <text>搜索中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      isSearching: false,
      hotSearchTags: [
        '阿胶', '小可爱医生', '感冒', '头痛',
        '神经病', '发烧', '癫痫', '阿莫西林',
        '脱发', '腿抽筋'
      ],
      searchResults: [],
      // 模拟搜索数据
      allData: [
        { id: 1, type: 'symptom', title: '感冒', description: '常见的上呼吸道感染疾病' },
        { id: 2, type: 'symptom', title: '头痛', description: '头部疼痛的症状' },
        { id: 3, type: 'symptom', title: '发烧', description: '体温升高的症状' },
        { id: 4, type: 'drug', title: '阿胶', description: '滋阴补血的中药材' },
        { id: 5, type: 'drug', title: '阿莫西林', description: '常用的抗生素药物' },
        { id: 6, type: 'doctor', title: '小可爱医生', description: '儿科专家医生' },
        { id: 7, type: 'symptom', title: '脱发', description: '头发异常脱落的症状' },
        { id: 8, type: 'symptom', title: '腿抽筋', description: '腿部肌肉痉挛的症状' }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onSearchInput() {
      if (this.searchKeyword.trim()) {
        this.performSearch()
      } else {
        this.searchResults = []
      }
    },
    performSearch() {
      if (!this.searchKeyword.trim()) return
      
      this.isSearching = true
      
      // 模拟搜索延迟
      setTimeout(() => {
        this.searchResults = this.allData.filter(item => 
          item.title.includes(this.searchKeyword) || 
          item.description.includes(this.searchKeyword)
        )
        this.isSearching = false
      }, 500)
    },
    selectHotTag(tag) {
      this.searchKeyword = tag
      this.performSearch()
    },
    selectResult(item) {
      // 根据搜索结果类型跳转到不同页面
      switch(item.type) {
        case 'symptom':
          uni.navigateTo({
            url: '/pages/symptoms/index'
          })
          break
        case 'drug':
          uni.navigateTo({
            url: '/pages/symptoms/index?tab=drugs'
          })
          break
        case 'doctor':
          uni.navigateTo({
            url: '/pages/doctors/index'
          })
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .search-input-wrapper {
    flex: 1;
    margin: 0 20rpx;
    
    .search-input {
      width: 100%;
      height: 60rpx;
      background-color: #f8f8f8;
      border-radius: 30rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      border: none;
    }
  }
  
  .search-btn {
    padding: 0 20rpx;
    
    text {
      color: #007AFF;
      font-size: 28rpx;
    }
  }
}

.hot-search {
  padding: 30rpx;
  background-color: #fff;
  margin-top: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .hot-tag {
      padding: 12rpx 24rpx;
      background-color: #f8f8f8;
      border-radius: 20rpx;
      font-size: 26rpx;
      color: #666;
    }
  }
}

.search-results {
  background-color: #fff;
  margin-top: 20rpx;
  
  .result-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .result-icon {
      width: 60rpx;
      height: 60rpx;
      background-color: #f0f8ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
    }
    
    .result-content {
      flex: 1;
      
      .result-title {
        display: block;
        font-size: 30rpx;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .result-desc {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .result-arrow {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.no-results {
  text-align: center;
  padding: 100rpx 30rpx;
  
  .no-results-icon {
    margin-bottom: 30rpx;
  }
  
  .no-results-text {
    display: block;
    font-size: 32rpx;
    color: #999;
    margin-bottom: 10rpx;
  }
  
  .no-results-tip {
    font-size: 26rpx;
    color: #ccc;
  }
}

.searching {
  text-align: center;
  padding: 100rpx 30rpx;
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>